<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="<?php echo $this->webroot;?>js/jquery.ui.core.js"></script>
<script type="text/javascript" src="<?php echo $this->webroot;?>js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->webroot?>css/jquery.ui.datepicker.css">
<link rel="stylesheet" type="text/css" href="<?php echo $this->webroot?>css/jquery-ui.css">

<script type="text/javascript">
	var map, marker;
	function setLatLng()
	{
		$('#lat').val(marker.getPosition().lat());
	    $('#lon').val(marker.getPosition().lng());
	}
	$(document).ready(function(){
		var latlng = new google.maps.LatLng(16.051571, 108.21489700000006);
		var myOptions = {
		  zoom: 14,
		  center: latlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("admin_map"),myOptions);
		marker = new google.maps.Marker({
			position: latlng, 
			map: map,
			draggable: true,
			title:"Di chuyển vị trí thích hợp"
		});
		map.setCenter(latlng);
		google.maps.event.addListener(marker, "drag", setLatLng);
		$( ".datepicker" ).datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: 'dd-mm-yy',
			dayNamesMin: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
			monthNamesShort: ['Tháng 1','Tháng 2','Tháng 3','Tháng 4','Tháng 5','Tháng 6','Tháng 7','Tháng 8','Tháng 9','Tháng 10','Tháng 11','Tháng 12'],
			yearRange: (new Date().getFullYear()-10) + ':'+ (new Date().getFullYear() + 50)
		});
		$('#SELECT-type').change(function(){
			if($(this).val() == 'tieude' || $(this).val() == 'noidung' || $(this).val() == 'diachi'){
				$(".div_date").hide();
				$(".div_type_duan").hide();
				$("#INPUT-search").show();
			}else if($(this).val() == 'ngaydang'){
				$(".div_date").show();
				$(".div_type_duan").hide();
				$("#INPUT-search").hide();
			}else if($(this).val() == 'phanloai'){
				$(".div_date").hide();
				$(".div_type_duan").show();
				$("#INPUT-search").hide();
			}
		});
		$('select[name=vitrixh]').change(function(){
			$(this).parent().submit();
		});
		$('select[name=phanloai]').change(function(){
			$(this).parent().submit();
		});
		
		$('.phanloai').change(function(){
			if($(this).val()==0){
				$('.vtxh').show();
			}else{
				$('.vtxh').hide();
			}
		});
		/*$("#textarea").htmlarea({
                toolbar: ["html", "|",
                        "forecolor",  // <-- Add the "forecolor" Toolbar Button
                        "|", "bold", "italic", "underline", "|", "p", "h1", "h2", "h3", "|", "link", "unlink", "|", "image"] // Overrides/Specifies the Toolbar buttons to show
		});*/
		
		$("#PostAddProject").validate({ 
	        rules: { 
              "tieude":"required",
              "mota":"required",
              "noidung":"required",
              "diachi":"required",
	        }, 
	        messages: { 
              "tieude": "Nhập tiêu đề bài viết",
              "mota": "Nhập nội dung mô tả",
              "noidung": "Nhập nội dung bài viết",
              "diachi": "Nhập địa chỉ",
	        } 
		});
	});	
	
</script>
<!-- Box -->
	<div class="box">
		<!-- Box Head -->
		<div class="box-head">
			<h2>Thêm dự án</h2>
		</div>
		<!-- End Box Head -->
		
		<form id="PostAddProject" method="post" enctype="multipart/form-data" action="<?php echo $this->webroot;?>duans/admin_add">
			
			<!-- Form -->
			<div class="form">
					<p>
						<label>Tên dự án <span class="require-field">(*)</span></label>
						<input class="field size1"  type="text" name="tieude"/>
					</p>
					<p>
						<label>Mô tả <span class="require-field">(*)</span></label>
						<textarea id="textarea_mota" class="field size1"  rows="10" cols="30" name="mota"></textarea>
					</p>
					<p>
						<label>Nội dung <span class="require-field">(*)</span></label>
						<textarea id="textarea" class="field size1"  rows="10" cols="30" name="noidung"></textarea>
					</p>
					<p>
						<label>Chủ đầu tư <span class="require-field">(*)</span></label>
						<input class="field size1"  type="text" name="chudautu"/>
					</p>
					<p>
						<label>Số điện thoại liên lạc <span class="require-field">(*)</span></label>
						<input class="field size1"  type="text" name="sdtlienlac"/>
					</p>
					<p>
						<label>Ngày kết thúc <span class="require-field">(*)</span></label>
						<input class="field size1 datepicker"  type="text" name="ngayketthuc"/>
					</p>
					<p>
						<label>Hình đại diện</label>
						<input class="field size1"  type="file" name="hinhdaidien" />
					</p>
					<p>
						<label>Địa chỉ <span class="require-field">(*)</span></label>
						<input class="field size1"  type="text" name="diachi"  />
					</p>
					<p>
						<label>Phân loại</label>
						<select name="phanloai" class="phanloai">
							<option value="0">Dự án thường</option>
							<option value="1">Dự án vip</option>
						</select>
					</p>
					<p class="vtxh">
						<label>Vị trí xuất hiện</label>
						<select name="vitrixh">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
						</select>
					</p>
					<p>
						<label>Đánh dấu trên bản đồ</label>
						<input type="hidden" name="lat" id="lat" value="16.051571">
						<input type="hidden" name="lon" id="lon" value="108.21489700000006">
						<div id="admin_map">
							a
						</div>
					</p>		
			</div>
			<!-- End Form -->
			
			<!-- Form Buttons -->
			<div class="buttons">				
				<input type="submit" class="button" value="Đăng dự án" />
			</div>
			<!-- End Form Buttons -->
		</form>
	</div>
	<!-- End Box -->